<template>
    <view class="withdrawal">
        <Navigation title="余额提现" backType="back" background="#fff" />
        <view class="w-f pv-40 ph-40 f ai-c jc-s-b" @click="show=true">
            <view class="fs-28 text-color4">提现至</view>
            <view class="f ai-c"  v-if="payChannelCode=='zfb_lite'">
                <image src="../static/login/zfb.png" class="w-48 h-48 mr-12"></image>
                <view class="fs-32 fw-600 text-color4 mr-20">支付宝</view>
                <u-icon name="arrow-right" color="#999999" size="11"></u-icon>
            </view>
			<view class="f ai-c"  v-if="payChannelCode=='wx_lite'">
                <image src="../static/login/wx.png" class="w-48 h-48 mr-12"></image>
                <view class="fs-32 fw-600 text-color4 mr-20">微信</view>
                <u-icon name="arrow-right" color="#999999" size="11"></u-icon>
            </view>
			<view class="f ai-c"  v-if="payChannelCode==''">
                请选择账户
                <u-icon name="arrow-right" color="#999999" size="11"></u-icon>
            </view>
        </view>
        <view class="bg ph-40 pv-40">
            <view class="fs-28 text-color4">提现金额</view>
            <view class="f mt-24 price ai-c">
                <view class="fs-48 fw-600 text-color4 mr-20">¥</view>
                <u--input placeholder="" border="none" fontSize="26" v-model="money" :customStyle="{ fontWeight: '600', height: '96rpx' }"></u--input>
            </view>
            <view class="fs-24 text-color3 mt-20">当前余额 {{wallet.balance}}元，最多可提现 {{wallet.balance}}，<text class="text-color" @click="money=wallet.balance">全部提现</text></view>
            <view class="fs-24 fw-600 text-color3 mt-56">温馨提示</view>
            <view class="fs-24 text-color3 mt-12">
				<view>1、XXXXXXXXXX </view>
				<view>2、XXXXXXXXXX </view>
				<view>3、XXXXXXXXXX </view>
				<view>4、XXXXXXXXXX </view>
				
			</view>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f ">
            <view class="ph-40 pv-20"><u-button text="确认提现" color="#FABB3C" shape="circle"  @click="toCode"></u-button></view>
        </view>
        <!-- 弹框 -->
        <u-popup :show="show" round="12">
            <view class="pt-40 ph-40">
                <view class="f ai-c jc-s-b pb-40">
                    <view></view>
                    <view class="fs-40 fw-600 text-color4">选择收款账号</view>
                    <u-icon name="close" color="#222222" size="16" @click="show=false"></u-icon>
                </view>
                <view class="f ai-c jc-s-b h-128 list" @click="selctMethod('wx_lite')">
                    <view class="f ai-c">
                        <image src="../static/login/wx.png" class="w-64 h-64"></image>
                        <view class="fs-32 text-color4 ml-20">微信</view>
                    </view>
                    <image src="../static/mine/gou.png" class="w-32 h-32" v-if="payChannelCode=='wx_lite'"></image>
                </view>
								<!--#ifdef APP-PLUS-->
                <view class="f ai-c jc-s-b h-128 list" @click="selctMethod('zfb_lite')" v-if="wallet.alipayAccount">
                    <view class="f ai-c">
                        <image src="../static/login/zfb.png" class="w-64 h-64"></image>
                        <view class="fs-32 text-color4 ml-20">支付宝</view>
                    </view>
                       <image src="../static/mine/gou.png" class="w-32 h-32" v-if="payChannelCode=='zfb_lite'"></image>
                </view>
								<!--#endif-->
            </view>
		</u-popup>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { walletGet,walletCash } from '@/services/api/index';
import {onShow } from '@dcloudio/uni-app';

const show=ref(false)
const wallet = ref({});
const money = ref(0);
const payChannelCode = ref('');
onShow(() => {

		getWallet()
	});
	
	function selctMethod(type:string){
		payChannelCode.value = type;
		show.value = false
	}
//钱包
		async function getWallet() {
		    const { data } = await walletGet();
		    wallet.value = data;
			
		}
//钱包
		async function toCode() {
				if(payChannelCode.value==''){
					uni.showToast({
					    title: '请选择提现方式',
					    icon: 'none',
					});
					return
				}
		    const { data } = await walletCash({
				money:money.value,
				collectionAccount:payChannelCode.value=='wx_lite'?wallet.value.wxOpenId:wallet.value.alipayAccount,
				payChannelCode:payChannelCode.value,
				walletId:wallet.value.walletId
			});
		    uni.showToast({
		        title: '操作成功，请等待平台审核',
		        icon: 'none',
		    });
		    setTimeout(()=>{
					uni.navigateBack()
				},500)
			
		}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.withdrawal {
    background: #f5f5f5;
    min-height: 100vh;
    .list{
        border-bottom: 1px solid #f5f5f5;
    }
    ::v-deep .u-button__text {
        font-size: 36rpx !important;
        font-weight: 600 !important;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
    }
    .price {
        border-bottom: 1px solid #f5f5f5;
    }
    .bg {
        background: #fff;
        min-height: 100vh;
        border-radius: 24rpx 24rpx 0 0;
    }
}
</style>
